<template>
  <div
    :id="`checkcitybox-${name}`"
    :ref="`checkcitybox-${name}`"
    :class="['checkcity', { checkcityclick: show }]"
    @click="checkme"
    style="width:200px"
  >
    <input
      style="display:none"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
    <span class="checkcity-value" v-if="value[0]">{{ city }}</span>
    <span class="checkcity-placeholder" v-else>请选择省、市、区</span>
    <Icon
      v-if="value[0]"
      class="close"
      type="ios-arrow-down"
      @click.stop
      @click="close"
    ></Icon>
    <Icon v-else type="ios-arrow-down"></Icon>
    <div :ref="`checkcity-${name}`" :style="style">
      <div class="checkcity-fixed" v-if="show" @click="show = false"></div>
      <div class="checkcity-con" @click.stop v-if="show">
        <Tabs v-model="citys" name="city" :animated="false">
          <TabPane label="省" name="province" tab="city">
            <jgoptioncity
              type="province"
              :value="value"
              @checkoption="checkoptionprovince"
            ></jgoptioncity>
          </TabPane>
          <TabPane
            label="市"
            name="city"
            :disabled="!value[1] && !value[0]"
            tab="city"
          >
            <jgoptioncity
              type="city"
              :value="value"
              @checkoption="checkoptioncity"
            ></jgoptioncity>
          </TabPane>
          <TabPane
            label="区县"
            name="county"
            :disabled="!value[2] && !value[1]"
            tab="city"
          >
            <jgoptioncity
              type="county"
              :value="value"
              @checkoption="checkoptioncounty"
            ></jgoptioncity>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { commonprovincelist } from "@/api/hqapi/city";
import jgoptioncity from "./optioncity";
export default {
  components: { jgoptioncity },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [Array],
      default: function() {
        return [];
      },
    },
    name: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {
      show: false,
      citys: "province",
      values: [],
      datas: [],
      style: {},
      check: false,
    };
  },
  computed: {
    city() {
      let citys = "";
      if (this.value[0]) {
        this.datas.forEach((province) => {
          if (+province.value == +this.value[0]) {
            citys += province.label;
            this.citys = "city";
            if (this.value[1]) {
              province.children.forEach((city) => {
                if (+city.value == +this.value[1]) {
                  citys += `/${city.label}`;
                  this.citys = "county";
                  if (this.value[2]) {
                    city.children.forEach((county) => {
                      if (+county.value == +this.value[2]) {
                        citys += `/${county.label}`;
                        return citys;
                      }
                    });
                  }
                }
              });
            }
          }
        });
      }
      return citys;
    },
  },
  mounted() {
    this.values = this.value;
    let citytime = this.storage.get("citytime");
    if (citytime) {
      if (this.$Date(this.$Date()).diff(citytime, "day") > 30) {
        this.askData();
      } else {
        this.datas = this.storage.get("cityarray");
      }
    } else {
      this.askData();
    }
  },
  methods: {
    checkme() {
      if (!this.value[0]) this.citys = "province";
      else if (!this.value[1]) this.citys = "city";
      else this.citys = "county";
      this.show = true;
      this.$nextTick(() => {
        this.check = true;
        const body = document.querySelector("body");
        let checkcity = this.$refs[`checkcity-${this.name}`];
        if (body.append) {
          body.append(checkcity);
        } else {
          body.appendChild(checkcity);
        }
        this.style = { top: 0, bottom: 0, position: "absolute" };
        let posTop = document.querySelector(".checkcity-con").clientHeight;
        let posLeft = document.querySelector(".checkcity-con").clientWidth;
        let width = document.body.clientWidth; // 1350
        let height = document.body.clientHeight; // 937
        var box = this.$refs[`checkcitybox-${this.name}`].getClientRects();
        if (height - box[0].bottom < posTop && width - box[0].left < posLeft) {
          this.style = {
            left: `${box[0].left - posLeft / 2}px`,
            top: `${box[0].top - 10 - posTop}px`,
            position: "absolute",
          };
        } else if (height - box[0].bottom < posTop) {
          this.style = {
            left: `${box[0].left}px`,
            top: `${box[0].top - 10 - posTop}px`,
            position: "absolute",
          };
        } else if (width - box[0].left < posLeft) {
          this.style = {
            left: `${box[0].left - posLeft / 2}px`,
            top: `${box[0].top + 30}px`,
            position: "absolute",
          };
        } else {
          this.style = {
            left: `${box[0].left}px`,
            top: `${box[0].top + 30}px`,
            position: "absolute",
          };
        }
      });
    },
    close() {
      this.citys = "province";
      this.$emit("cityvalue", []);
    },
    askData() {
      commonprovincelist().then((res) => {
        this.storage.set("citytime", this.$Date().format("YYYY-MM-DD"));
        this.storage.set("cityarray", res.data);
      });
    },
    // 选择省
    checkoptionprovince(value) {
      this.values = [];
      if (value) {
        this.$set(this.values, 0, value);
        this.$set(this.values, 1, "");
        this.$set(this.values, 2, "");
      } else {
        this.$set(this.values, 0, "");
        this.$set(this.values, 1, "");
        this.$set(this.values, 2, "");
      }
      this.sendMessage();
    },
    // 选择市
    checkoptioncity(value) {
      if (value) {
        this.$set(this.values, 1, value);
        this.$set(this.values, 2, "");
      } else {
        this.$set(this.values, 1, "");
        this.$set(this.values, 2, "");
      }
      this.sendMessage();
    },
    // 选择区
    checkoptioncounty(value) {
      if (value) {
        this.$set(this.values, 2, value);
        this.show = false;
      } else {
        this.$set(this.values, 2, "");
      }
      this.sendMessage();
    },
    // 父组件发送消息
    sendMessage() {
      let data = [];
      for (let i in this.values) {
        if (!this.values[i]) {
          break;
        }
        data.push(this.values[i]);
      }
      this.$emit("cityvalue", data);
    },
  },
};
</script>
<style lang="less" scoped>
.checkcityclick {
  .ivu-icon {
    transform: translateY(-50%) rotate(180deg) !important;
    display: inline-block;
  }
}
.checkcity {
  height: 32px;
  position: relative;
  display: block;
  box-sizing: border-box;
  outline: none;
  user-select: none;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdee2;
  transition: all 0.2s ease-in-out;
  &-placeholder {
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 24px;
    color: #999;
  }
  &-value {
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 24px;
  }
  &-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10000;
  }
  &-con {
    position: absolute;
    width: 450px;
    background-color: #fff;
    z-index: 10001 !important;
    margin: 5px 0;
    height: 380px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }
  &-cons {
    position: absolute;
    padding: 16px;
    width: 420px;
    background-color: #fff;
    z-index: 10001;
    margin: 5px 0;
    height: 400px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }
  .close:hover {
    &:before {
      content: "\f177";
    }
  }
  .ivu-icon-ios-arrow-down {
    position: absolute;
    top: 50%;
    right: 8px;
    line-height: 1;
    transform: translateY(-50%);
    font-size: 14px;
    color: #808695;
    transition: all 0.2s ease-in-out;
  }
}
.optioncity {
  width: 100%;
}
/deep/.ivu-btn {
  font-size: 12px !important;
  line-height: 28px !important;
}
@media screen and (max-width: 1400px) {
  .optioncity {
    width: 100%;
  }
  .checkcity {
    &-con {
      position: absolute;
      width: 500px;
      background-color: #fff;
      z-index: 10001 !important;
      margin: 5px 0;
      height: 360px;
      padding: 16px;
      background-color: #fff;
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
    &-cons {
      position: absolute;
      padding: 16px;
      width: 500px;
      background-color: #fff;
      z-index: 10001;
      margin: 5px 0;
      height: 360px;
      padding: 16px;
      background-color: #fff;
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
